import React, { Component } from 'react'
import { Layout, Breadcrumb, Pagination } from 'antd';
import { Button } from 'antd'
import MyNavLink from '../MyNavLink';
import '../Available/available.css'
import { withRouter } from 'react-router';
const { Content } = Layout;

class Text extends Component {
    constructor(props) {
        super(props);
        this.state = {
            color: ["white", "white", "white", "white", "white", "white", "white", "white", "white", "white"],
            flag: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            numflag: 99999,
            current: 1,
            houseArray: [],
            showArray: []
        };
    }

    componentDidMount() {
        fetch('/house/visit', {
            // fetch('http://60.205.246.238:3000/house/visit', {
            method: 'get',
            // headers: {
            //     "Content-type": "application/json"
            // },
        }).then((response) => {
            return response.json()
        }).then((data) => {
            console.log( data)
            this.setState({
                houseArray: data,
                showArray: data.slice(0, 10)
            })
        })
    }

    componentWillUnmount() {
        this.setState = () => false;
    }

    onpageChange = page => {
        this.setState({
            current: page,
            showArray: this.state.houseArray.slice((page - 1) * 10, (page) * 10)
        })
        console.log("点击第" + page + "页");
        console.log("翻页后showArray如下")
        console.log(this.state.showArray)
        // fetch('http://127.0.0.1:8000/JSON-server', {
        //     method: 'post',
        //     headers: {
        //         "Content-type": "application/json"
        //     },
        //     body: page
        // }).then((response) => {
        //     return response.json()
        // }).then((data) => {
        //     console.log("点击换页收到的数据为" + data)
        //     this.setState({
        //         current: page,
        //         houseArray: data
        //     })
        // }).catch(function (error) {
        //     console.log(error)
        // })

    };


    //实现点击更换背景颜色
    ItemOnClick = (e, index) => {
        const addflag = this.state.flag.reduce((num, total) => total + num)


        if (this.state.flag[index] === 0) {
            if (addflag === 0) {


                const newcolor = this.state.color
                newcolor[index] = "#1890FF"
                const newflag = this.state.flag
                newflag[index] = 1
                this.setState({
                    color: newcolor,
                    flag: newflag,
                    numflag: index
                })
            }

            else if (addflag == 1) {

                const newcolor = ["white", "white", "white", "white", "white", "white", "white", "white", "white", "white"]
                newcolor[index] = "#23A9F2"
                const newflag = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                newflag[index] = 1
                this.setState({
                    color: newcolor,
                    flag: newflag,
                    numflag: index
                })
            }
        }
    }
    changeerror = () => {
        alert("请选择后再进行修改！")
    }


    onSubmit = (values) => {
        console.log('Success:', values);
    };


    // onFinishFailed = (errorInfo) => {
    //     console.log('Failed:', errorInfo);
    // };


    render() {


        return (
            <div className="" id="returnMyText">
                <Content style={{ padding: '0 50px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>上传发布</Breadcrumb.Item>
                        <Breadcrumb.Item>闲置房屋</Breadcrumb.Item>
                    </Breadcrumb>

                    <div className="outershow-container">
                        <div className="left">
                            <form onSubmit={this.onSubmit}>
                                <div className="change-container">
                                    <div className="changeinput-container">

                                        {
                                            this.state.houseArray.map((item, index) => {
                                                return (
                                                    <input
                                                        type="text"
                                                        className="ant-input"
                                                        defaultValue={index + 1}
                                                        key={item.id}

                                                    >
                                                    </input>
                                                )
                                            })
                                        }

                                    </div>
                                </div>
                                <div className="button-container">
                                    <button className="ant-btn ant-btn-primary" type="submit">提交</button>
                                </div>
                            </form>
                        </div>

                        <div className="right">
                            <div className="show-container">
                                <div className="item-container">
                                    <div className="inline-container">
                                        <span className="span-title" style={{ flex: 0.75 }}>标题</span>
                                        <span className="line">|</span>
                                        <span className="span-id" style={{ flex: 0.25 }}>默认位置</span>
                                    </div>
                                </div>


                                {this.state.showArray.map((item, index) => {
                                    if (index < 9) {
                                        return (
                                            <div className="item-container" key={item.id} onClick={(e) => this.ItemOnClick(e, index)} style={{ backgroundColor: this.state.color[index] }}>
                                                <div className="inline-container">
                                                    <span className="span-title">{item.title}</span>
                                                    <span className="line">|</span>
                                                    <span className="span-id">{index}</span>
                                                </div>
                                            </div>
                                        )
                                    }
                                    else {
                                        return (
                                            <div className="item-container" key={item.id} onClick={(e) => this.ItemOnClick(e, index)} style={{ backgroundColor: this.state.color[index] }}>
                                                <div className="inline-container">
                                                    <span className="span-title">{item.title}</span>
                                                    <span className="line">|</span>
                                                    <span className="span-id">{index}</span>
                                                </div>
                                            </div>
                                        )
                                    }
                                })
                                }
                            </div>
                            <div className="pagebutton-container">
                                <Pagination {...this.props}
                                    current={this.state.current}
                                    onChange={this.onpageChange}
                                    total={Math.ceil(this.state.houseArray.length / 10) * 10}
                                />
                            </div>
                            <div className="button-container">
                                {
                                    this.state.numflag === 99999 ?
                                        (<Button type="primary" onClick={this.changeerror} >修改</Button>) :
                                        (<MyNavLink to={{
                                            pathname: '/availablechangeform',
                                            state: { item: this.state.houseArray[this.state.numflag] }
                                        }}>
                                            <Button type="primary" >修改</Button>
                                        </MyNavLink>)
                                }
                                <Button type="primary">删除</Button>
                                <MyNavLink to="/availableform">
                                    <Button type="primary">添加新项目</Button>
                                </MyNavLink>
                            </div>
                        </div>
                    </div>
                </Content >

                <div className="pagebutton-container">
                    <Button >上一页</Button>
                    <span>第{ }页/共x页</span>
                    <Button >下一页</Button>
                </div>

                {/* <div className="button-container">
                    <Button type="primary">修改</Button>
                    <Button type="primary">删除</Button>
                    
                    <MyNavLink to={{ pathname: `/availableform`, state: { id: 99999 } }} >
                            <Button type="primary">添加新项目</Button>
                    </MyNavLink>
                </div> */}


            </div >
        )
    }
}

export default withRouter(Text)